<template>
    <div class="qr">
        <div class="a">
            <p>您好，</p>
            <p>欢迎使用易生活</p>
        </div>

    <div class="b">

    <div class="b">

            <div class="zhanghao">
                <p>手机号</p>
                <input type="text" placeholder="请输入你的手机号" v-model="phone">
            </div>
            <!-- <div class="yanzheng">
                <p>验证码</p>
                <input type="text" placeholder="请输入你的验证码" v-model="yzm">
            </div> -->
            <div class="mima">
                <p>密码</p>
                <input type="text" placeholder="请设置你的密码" v-model="pwd">
            </div>
            <div class="asd">
                <button @click="register">注册</button>
            </div>
            <van-divider>第三方登录</van-divider>
            <div class="fang">
                <img src="../img/微信 (1).png" alt="">
                <img src="../img/QQ.png" alt="">
                <img src="../img/微博@2x.png" alt="">
            </div>
           <div class="yin">
                <div class="ipt"><van-checkbox @click="click" icon-size="12px" v-model="checked"></van-checkbox></div>
                <div class="ok"><span>已阅读并同意</span><span>《用户协议》</span><span>《隐私协议》</span></div>
            </div>
        </div>     
        </div>
    </div>
</template>

<script>
import axios from "../../request"
export default {
    data() {
        return {
            checked:false,
            phone:"",
            pwd:"",
        }
    },
    methods: {
        click(){
            this.checked=true;
        },
        register(){
            if(this.phone!="" && this.pwd!="" && this.checked==true){
                axios.post("/api/sys/user",{password:this.pwd,phone:this.phone,username:this.phone}).then(data=>{
                    console.log(data);
                    if(data.data.msg!=null){
                        this.$toast(data.data.msg)
                    }else{
                        this.$toast(data.data.error)
                    }
                })
            }else if(/^1\d{10}$/.test(this.phone)==false){
                this.$toast("手机号格式不正确")
            }
            else if(this.phone=="" || this.pwd==""){
                this.$toast("信息不能为空")
            }else if(this.checked==false){
                this.$toast("请勾选用户协议")
            }
        }
    }
}


</script>

<style scoped>
    .yin{
        display:flex;
        height:0.21rem;
        font-size:0.1rem;
        justify-content: center;
        align-items: center;
        margin-top:0.2rem;
    }
    .yin .ok{
        width:2.2rem;
        font-size:0.1rem;
        margin-left: 0.1rem;
    }
    .fang{
        display: flex;
        justify-content: space-around;
    }

    .zx{
        width: .1rem;
        height: .1rem;
        border: 1px solid black;
        border-radius: 50%;
    }
    .fang img{
        height: 0.26rem;
    }
    button{
        width: 3.02rem;
        height: .56rem;
    }
    .asd button{
        margin-top: .43rem;
        border-radius: .56rem;
        background-color: #5fcbbb;
        border:none;
        color: #fff;
        margin-bottom: 0.5rem;
    }
    .qr{
        width: 3.75rem;
        height: 6.2rem;
        background-color: #5fcbbb;
        font-size: 0.3rem;
    }
    .a{
        width: 3.3rem;
        height: 1rem;
        padding: .2rem;
        color: #fff;
    }
    .a p{
        font-size: 0.26rem;
    }
    .b{
        height: 4.5rem;
        padding: .2rem;
        background-color: #fff;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        font-size: .22rem;
    }
    .b p{
        height: 0.25rem;
        font-size: 0.18rem;
        font-weight: bold;
        color: #333333;
        line-height: 0.25rem;
    }
    .yanzheng p,.mima p{
        margin-top: 0.22rem;
    }
    .b input{
        width: 90%;
        /* height: .3rem; */
        font-size: .16rem;
        border:none;
        padding-bottom: 0.1rem;
        border-bottom:1px solid #F7F7F7;
    }
    .zhanghao :nth-child(2){
        margin-top: .01rem;
    }
</style>